<!DOCTYPE html>
<html>
<head>
  <title>anime.js</title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="img/favicon.png" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
  <link href="css/styles.css" rel="stylesheet">
</head>
<style>

  .wrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    perspective: 800px;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    width: 100%;
    height: 100%;
  }

  div {
    width: 10vw;
    height: 10vh;
  }

</style>

<body>
  <section class="wrapper"></section>
  <script src="../anime.js"></script>
  <script>

    var wrapperEl = document.querySelector('.wrapper');
    var numberOfThings = 25;

    function createEl(className) {
      var el = document.createElement('div');
      el.classList.add(className);
      wrapperEl.appendChild(el);
    }

    for (var i = 0; i < numberOfThings; i++) {
      createEl('red');
      createEl('blue');
      createEl('green');
      createEl('yellow');
    }

    anime({
      targets: 'div',
      translateZ: 720,
      rotateX: 180,
      rotateY: 180,
      delay: function(el, i) {
        return i * 5;
      },
      loop: true,
      direction: 'alternate',
      easing: 'easeOutQuad',
    });

  </script>
</body>
</html>
